<template>
  <!-------------------------- 封装组件获取用户频道列表 ------------------------------>
  <div>
    <!------------- 上拉加载----------------- -->
    <van-pull-refresh
      v-model="isFreshLoading"
      @refresh="onRefresh"
      :success-text="freshText"
      success-duration="1500"
    >
      <!-- =={{count}}== -->
      <!--------------- 下拉加载 -------------- -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- ---------------------------把下拉的组件抽离出去 ---------------------------------------->
        <!-- <van-cell v-for="item in newsList" :key="item.art_id" :title="item.title">
          <template #label>
            <span class="custom-title">{{item.aut_name}}</span>
            <van-tag type="danger">{{item.like_count}}</van-tag>
            <span type="danger">{{item.pubdate | format}}</span>
          </template>
        </van-cell> -->
        <!-- ------------------------------------------------------- -->
        <articleitem :newsList="newsList"></articleitem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
           
<script>
import { getArticles_api } from "@/api/login/index";
//引入抽离封装的组件--------------------
import articleitem from "@/common/article-item-fz"

export default {
components:{
articleitem
},
  data() {
    return {
      newsList: [],
      timestamp: "",
      freshText:'',
      loading: false, //控制加载中的状态
      finished: false, //控制加载完成的状态
      isFreshLoading: false //下拉加载控制
    };
  },
  props: ["itemChannel"],
  created() {},
  methods: {
    // 下拉加载组件-------------------------------
    async onRefresh() {
      const { data: res } = await getArticles_api({
        channel_id: this.itemChannel.id,
        timestamp: +new Date(), //置顶最新的，直接用时间戳
        with_top: 1
      });
      this.newsList = res.data.results;
      this.freshText=`涮新数据成功,获取了${res.data.results.length}条数据`
      this.isFreshLoading = false;
    },
    /*   //  点击频道
    async changeChannels(name) {
      const { data: res } = await getArticles_api(name);
      console.log(res, 454545454);
      this.newsList = res.data.results;
    }, */
    //上拉加载事件--------------------------------------------------
    async onLoad() {
      // 异步更新数据 ，初次打开页面就会执行一次
      try {
        const { data: res } = await getArticles_api({
          channel_id: this.itemChannel.id,
          timestamp: this.timestamp || +new Date(),  //获取时间戳
          with_top: 1
        });
        // console.log(res,888888)
        //每下拉一次，就把新的数据往数组里追加---------------------
        this.newsList = [...this.newsList, ...res.data.results];
        // console.log(res,8888);
        this.loading = false;
        //判断数组的长度，如果有长度，就执行下拉，如果没有，就停止加载事件
        if (!res.data.results.length) {
          this.finished = true;
        } else {
          //获取下一次请求的时间戳
          this.timestamp=res.data.pre_timestamp
        }
      } catch (err) {
        this.$toast.fail("获取失败");
      }
    }
  }
};
</script>
<style scoped lang="less">
/deep/.van-list {
  height: 100%;
  .van-loading {
    height: 100%;
  }
}
.van-pull-refresh__track {
  height: 100%;
}
</style>